<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" +
            request.getServerName() + ":" + request.getServerPort() +
            request.getContextPath() + "/";
%>/
<html>
<head>
    <title>商品页</title>
    <base href="<%=basePath%>" />
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
            function test(){
                alert("点击");
            }
    </script>
    <link rel="stylesheet" href="css/shopping.css">
    <style>
    </style>
    <script type="text/javascript">
        $(function () {
            selectBooks();
            var btns = document.getElementsByClassName("btn2")//获取内容盒子
            var contents = document.getElementsByClassName("content")
            //遍历每个按钮为其添加点击事件
            for(var i=0;i<btns.length;i++){
                btns[i].index = i;
                btns[i].onclick = function(){//对当前点击的按钮赋予active类名及显示当前按钮对应的内容
                    for(var j=0;j<btns.length;j++){
                        btns[j].className = btns[j].className.replace(' active', '').trim();
                        contents[j].className = contents[j].className.replace(' show', '').trim();
                    }
                    this.className = this.className + ' active';
                    contents[this.index].className = contents[this.index].className + ' show';
                };
            }
            window.onload = function(){
                document.getElementById('first').click();
                if (sessionStorage.getItem("name")==null){
                    $("#denglu").click(function(){
                        $(this).val("登录");
                    });
                }else {
                    $("#denglu").click(function(){
                        $(this).val("退出");
                    });
                }
                $("#first").click(function () {
                    selectBooks();
                });
                $("#first").click(function () {
                    if (sessionStorage.getItem("name")==null){
                        $("#denglu").click(function(){
                            $(this).val("登录");
                        });
                    }else {
                        $("#denglu").click(function(){
                            $(this).val("退出");
                        });
                    }
                });
            }
            $('.alert-box').hide();
            var deng = document.getElementById("quxiao");
            deng.addEventListener('click',function(){
                $('.alert-box').fadeOut();
            })
            var b = document.getElementById("cha");
            b.addEventListener('click',function(){
                $('.alert-box').fadeOut();
            })
            var alertbox = document.querySelector('.alert-box');
            window.addEventListener('click',function(e){
                if(e.target==alertbox){
                    $('.alert-box').fadeOut();
                }
            })
        })
        function zhuan(){
            var selectgoods1 = document.getElementById("selectgoods1");
            var selectgoods2 = document.getElementById("selectgoods2");
            selectgoods2.value=selectgoods1.value;
            document.getElementById("select").click();
            selectBooksByName();
        }
        function selectBooksByName2() {
            selectBooksByName();
        }
        function selectBooksByName(){
            console.log($("#selectgoods2").val());
            $.ajax({
                url:"user/selectBooksByName.do",
                type:"post",
                dataType:"json",
                data:{
                    "name":$("#selectgoods2").val()
                },
                success:function(data){
                    var f =0;
                    //清除旧的数据
                    $("#mytable2").html("");
                    //增加新的数据
                    $("#mytable2").append("<tr>");
                    $.each(data,function(i,n){
                        $("#mytable2").append('<td><img onclick="picture('+n.bid+');" src="book/'+n.picture+'.png" alt="暂无图片"><br><span class="booktext">&yen;'+n.price+'</span></td>');
                        f++;
                        if (f%4==0){
                            $("#mytable2").append("</tr>");
                            $("#mytable2").append("<tr>");
                        }
                    });
                    if (f%4!=0){
                        $("#mytable2").append("</tr>");
                    }
                }
            })
        }
        function llogin() {
            if(sessionStorage.getItem("name")!=null){
                sessionStorage.removeItem("name");
                window.location.href =  "index.jsp";
            }else {
                window.location.href =  "index.jsp";
            }
        }
        function llogin2() {
            if(sessionStorage.getItem("name")==null){
                alert("未登录，请先登录");
                window.location.href =  "index.jsp";
            }else {
                window.location.href =  "user.jsp";
            }
        }
        function jiarugouwuche() {
            if(sessionStorage.getItem("name")==null){
                window.location.href =  "index.jsp";
            }else {
                $.ajax({
                    url:"user/insertShoppingCart.do",
                    type:"post",
                    dataType:"json",
                    data:{
                        "bname":$("#bname").text(),
                        "uname":sessionStorage.getItem("name"),
                        "bnum":Number($("#shoppingnum").text())
                    },
                    success:function(){
                        $("#shoppingnum").text(1);
                    }
                })
            }
            $('.alert-box').hide();
        }
        function addandred(num) {
            var n = Number($("#shoppingnum").text());
            n+=num;
            var  n2 = Number($("#num").text());
            if (n>n2||n<1){
                n-=num;
            }
            $("#shoppingnum").text(n);
        }
        function picture(bid){
            $.ajax({
                url:"user/selectBookById.do",
                type:"post",
                dataType:"json",
                data:{
                    "bid":bid
                },
                success:function(data){
                    $("#bname").text(data.bname);//$("#")
                    $("#num").text(data.num);
                }
            })
            $('.alert-box').fadeIn();
        }
        function selectBooks(){
            $.ajax({
                url:"user/selectBooks.do",
                type:"post",
                dataType:"json",
                data:{},
                success:function(data){
                    var f =0;
                    //清除旧的数据
                    $("#mytable").html("");
                    //增加新的数据
                    $("#mytable").append("<tr>");
                    $.each(data,function(i,n){
                        $("#mytable").append('<td><img onclick="picture('+n.bid+');" src="book/'+n.picture+'.png" alt="暂无图片"><br><span class="booktext">&yen;'+n.price+'</span></td>');
                        f++;
                        if (f%4==0){
                            $("#mytable").append("</tr>");
                            $("#mytable").append("<tr>");
                        }
                    });
                    if (f%4!=0){
                        $("#mytable").append("</tr>");
                    }
                }
            })
        }
    </script>
</head>
<body>
<div class="ding">
    <div style="float: top;margin-left:0px;margin-top:5px;margin-left:20px;">
        <button style="background:transparent;border-width:0px;color: black" onclick="test()"><img src="images/book.png" class="img2">图书</button>
    </div>
    <div style="font-style:italic;color:white;font-size:30px;text-align: center;position:fixed;left: 500px;width: 150px;height: 60px;top: 12px;">

    </div>
    <div style="text-align: center;position:fixed;right: 10px;width: 200px;height: 60px;top: 20px;">
        <button id="gerenzhongxin" style="background:transparent;border-width:0px;color: black" onclick="llogin2()">个人中心</button>&emsp;&emsp;
        <button id="denglu" style="background:transparent;border-width:0px;color: black" onclick="llogin()">登录</button>
    </div>
</div>
<div class="cebian">
    <div class="cebianmsg" style="margin-top:50px;">
        <button class="btn2 active" id="first">首页</button>
    </div>
    <div class="cebianmsg">
        <button class="btn2" id="select">查询</button>
    </div>
</div>
<div class="zhuti">
    <div style="position: relative;top: 2px;left: 2px;width: 100%;height: 600px;background-color: #f5f5f5;overflow-y:auto;">
        <div class="content" style="float: top;margin-left:5px;margin-top:10px;width: 100%;height: 70px;border-bottom:1px solid #CCC;">
            <div class="box">
                <input type="text" class="input" placeholder="请输入商品" id="selectgoods1">
                <input type="button" value="搜索" class="btnSelect" id="selectbtn1" onclick="zhuan()">
            </div>
            <div style="position: relative;top: 100px;left: 100px;">
                <table id="mytable" style="border-spacing: 50px 30px;">

                </table>
            </div>
        </div>
        <div class="content" style="float: top;margin-left:5px;margin-top:10px;width: 100%;height: 70px;border-bottom:1px solid #CCC;">
            <div class="box">
                <input type="text" class="input" placeholder="请输入商品"  id="selectgoods2">
                <input type="button" onclick="selectBooksByName2()" value="搜索" class="btnSelect" id="selectbtn2">
            </div>
            <div style="position: relative;top: 100px;left: 100px;">
                <span id="is" style="font-size: 20px;color: rgb(167, 159, 159);"></span>
                <table id="mytable2" style="border-spacing: 50px 30px;">

                </table>
            </div>
        </div>
        <div class="alert-box">
            <div class="alert">
                <div style="position:absolute;top: 0px;width: 700px;height: 50px;border-bottom:1px solid #CCC;">
                    <span class="moaltext">详细信息</span><button class="b" id="cha" style="width: 60px;height: 40px; background:transparent;border-width:0px;font-size:40px">&times;</button>
                </div>
                <div style="position:absolute;top: 51px;width: 700px;height: 295px; border-bottom:1px solid #CCC;overflow-y:auto; overflow-x:auto;">
                    <span class="moaltext">书名：</span><span id="bname" class="moaltext"></span>
                    <hr> <span class="moaltext">库存：</span><span id="num" class="kucun moaltext">12</span><hr>
                    <br><br><br><br><br><br><br>
                    <span class="moaltext">购买数量：</span><span id="shoppingnum" class="kucun moaltext">1</span>&emsp;&emsp;<button onclick="addandred(1)">+</button><button onclick="addandred(-1)">-</button>
                </div>
                <div style="position:absolute;bottom:0px;width: 700px;height: 50px;">
                    <button id="quxiao" style=" width: 60px;height: 35px;border-radius: 0.5rem;background:transparent;border: 1px solid #CCC;">关闭</button>&emsp;
                    <button id="baocun" onclick="jiarugouwuche()" style="width: 90px;height: 35px;border-radius: 0.5rem;background-color: #428bca;border: 1px solid #CCC;color: #FFFFFF">加入购物车</button>
                </div>
            </div>
        </div>
    </div>
    <script>

    </script>
</div>
</body>
</html>
